<template>
  <div style="height: 97%">
    <div class="head">
      <a-radio-group v-model:value="projectTyep" button-style="solid">
        <a-space size="middle">
          <a-radio-button :value="null">所有课程</a-radio-button>
        </a-space>

        <div style="margin-right: 25px; float: right">
          <a-button type="primary" @click="createProjectModal = true">新增课程</a-button>
        </div>
      </a-radio-group>
    </div>

    <div class="body">
      <!-- 筛选栏 -->
      <a-form
        class="filter"
        ref="formRef"
        :model="formState"
        autocomplete="off"
        :label-col="labelCol"
      >
        <div class="filter-box">
          <div class="filter-options">
            <a-form-item label="课程名称" name="CourseName">
              <a-input
                v-model:value="formState.CourseName"
                placeholder="输入课程名称"
                allow-clear
              />
            </a-form-item>
          </div>

          <div class="filter-buttons">
            <a-button type="primary" @click="onSubmit">
              <template #icon> <SearchOutlined /> </template>查询</a-button
            >
            <a-button @click="resetForm">
              <template #icon> <RedoOutlined /> </template>重置</a-button
            >
          </div>
        </div>
      </a-form>
      <!-- 表格 -->
      <CourseTableTable :courses="courses" :loading="loading" />
      <!-- 分页器 -->
      <a-pagination
        v-model:current="current"
        v-model:page-size="pageSizeRef"
        :total="total"
        show-size-changer
        class="pagination"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import CourseTableTable from '@/views/CoursesList/CourseTable.vue';

import type { FormInstance } from 'ant-design-vue';
import dayjs from 'dayjs';
import CourseDao from '@/daos/course_dao';
import { useStore } from 'vuex';

const store = useStore();
const courseDao = new CourseDao();
//创建任务窗口状态
const createProjectModal = ref<boolean>(false);

//顶部项目类型选取值
const projectTyep = ref(null);
//分页器
const current = ref(1);
const pageSizeRef = ref(10);
const total = ref();

//筛选表单对应数据接口
interface FormState {
  CourseName: string;
}
//筛选标签宽度
const labelCol = { style: { width: '90px' } };
//筛选表单对应数据
const formState = reactive<FormState>({
  CourseName: ''
});

//筛选表单Ref
const formRef = ref<FormInstance>();
//项目表格数据与加载状态
const courses = ref([]);
const loading = ref(true);
//提交筛选内容
const onSubmit = () => {};
//清空筛选框内容
const resetForm = () => {
  formRef.value.resetFields();
};

const findCourses = (current: number) => {
  loading.value = true;
  courseDao
    .findCoursesByUserId(store.getters.userId, null, current - 1, pageSizeRef.value)
    .then((result) => {
      courses.value = result.data.data.rows;
      total.value = result.data.data.totalCount;
      loading.value = false;
    })
    .catch((error) => {
      console.error('获取课程列表错误 findCourseByUserId', error);
      loading.value = false;
    });
};

//挂载页面数据
onMounted(() => {
  findCourses(current.value);
});
</script>

<style scoped>
.head {
  display: flex;
  flex-direction: column;
  padding: 1.5%;
  margin: 1%;
  height: auto;
  /* 使容器高度为视口高度 */
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.body {
  display: flex;
  flex-direction: column;
  padding: 1.5%;
  margin: 1%;
  height: 85%;
  /* 使容器高度为视口高度 */
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid lightgray;
  border-radius: 10px;
  background-color: #fff;
  overflow: auto;
}

.filter {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  width: 75%;
}

.filter-buttons {
  display: flex;
  justify-content: space-between;
  width: 180px;
}

.pagination {
  text-align: center;
  bottom: 0%;
  margin-top: 1%;
}
</style>
